<template>
  <div id="app">
    <!-- 按钮 button -->
    <!-- <div class="row">
      <l-button @click="fn">按钮</l-button>
      <l-button type="primary" @click="fn">按钮</l-button>
      <l-button type="success">登录</l-button>
      <l-button type="info">按钮</l-button>
      <l-button type="warning">删除</l-button>
      <l-button type="danger">按钮</l-button>
    </div>
    <div class="row">
      <l-button plain icon="l-icon-delete" type="primary">按钮</l-button>
      <l-button plain icon="l-icon-delete" type="success">登录</l-button>
      <l-button plain icon="l-icon-delete" type="info">按钮</l-button>
      <l-button plain icon="l-icon-delete" type="warning">删除</l-button>
      <l-button plain icon="l-icon-delete" type="danger">按钮</l-button>
    </div>
    <div class="row">
      <l-button round plain type="primary">按钮</l-button>
      <l-button round plain type="success">登录</l-button>
      <l-button round plain type="info">按钮</l-button>
      <l-button round plain type="warning">删除</l-button>
      <l-button round plain type="danger">按钮</l-button>
    </div>
    <div class="row">
      <l-button circle plain type="primary">按钮</l-button>
      <l-button circle plain type="success">登录</l-button>
      <l-button circle plain type="info">按钮</l-button>
      <l-button circle plain type="warning">删除</l-button>
      <l-button circle plain type="danger">按钮</l-button>
    </div>
    <div class="row">
      <l-button circle plain icon="l-icon-delete" type="primary"></l-button>
      <l-button circle plain icon="l-icon-delete" type="success"></l-button>
      <l-button circle plain icon="l-icon-delete" type="info"></l-button>
      <l-button circle plain icon="l-icon-delete" type="warning"></l-button>
      <l-button circle plain icon="l-icon-delete" type="danger"></l-button>
    </div>
    <div class="row">
      <l-button disabled plain icon="l-icon-delete" type="primary"></l-button>
      <l-button disabled plain icon="l-icon-delete" type="success"></l-button>
      <l-button disabled plain icon="l-icon-delete" type="info"></l-button>
      <l-button disabled plain icon="l-icon-delete" type="warning"></l-button>
      <l-button disabled plain icon="l-icon-delete" type="danger"></l-button>
    </div>
    <div class="row">
      <l-button disabled icon="l-icon-delete"></l-button>
      <l-button disabled icon="l-icon-delete" type="primary"></l-button>
      <l-button disabled icon="l-icon-delete" type="success"></l-button>
      <l-button disabled icon="l-icon-delete" type="info"></l-button>
      <l-button disabled icon="l-icon-delete" type="warning"></l-button>
      <l-button disabled icon="l-icon-delete" type="danger"></l-button>
    </div> -->

    <!-- 弹框 dialog -->
    <!-- <l-dialog title="数据结构"></l-dialog>
    <l-dialog>
      <template v-slot:title>
        <h3>我是标题</h3>
      </template>
    </l-dialog>
    <l-dialog width="50%" top="100px"></l-dialog>
    <l-button @click="visible=true">切换</l-button>
    <l-dialog :visible.sync="visible">
      <ul>
        <li>吃饭</li>
        <li>睡觉</li>
        <li>看电视</li>
      </ul>
      <template v-slot:footer>
        <l-button>取消</l-button>
        <l-button type="primary">确定</l-button>
      </template>
    </l-dialog> -->

    <!-- 输入框 input -->
    <!-- <h3>props处理placeholder, type, name</h3>
    <l-input placeholder="请输入内容" type="password" name="Input"></l-input>
    <h3>禁用按钮-disabled</h3>
    <l-input disabled></l-input>
    <h2>v-model 语法糖</h2>
    <h3>给普通表单元素使用v-model</h3>
    <input v-bind:value="msg" v-on:input="msg= $event.target.value">
    <input v-model="msg">
    <h3>给组件使用v-model指令，实质上相当于给组件传递value属性以及监听了input事件</h3>
    <l-input :value="msg" @input="msg= arguments[0]"/>
    <l-input v-model="msg" />
    <h3>clearable 与 show-password 处理</h3>
    <l-input type="password" v-model="msg" clearable></l-input>
    <l-input type="password" v-model="msg" showPassword></l-input> -->

    <!-- 开关 switch -->
    <!-- <l-switch v-model="active1"></l-switch>
    <l-switch v-model="active2" active-color="green" inactive-color="red"></l-switch>
    <l-switch v-model="active3" active-color="green"></l-switch>
    <l-switch v-model="active4" inactive-color="red"></l-switch>
    <l-switch v-model="active5" name="username"></l-switch> -->

    <!-- 单选框 radio -->
    <!-- <h3>label与插槽的处理</h3>
    <l-radio label="1" v-model="gender">男</l-radio>
    <l-radio label="0" v-model="gender">女</l-radio>
    <l-radio label="1" v-model="gender"></l-radio>
    <l-radio label="0" v-model="gender"></l-radio> -->

    <!-- radio-group组件 -->
    <!-- <radio-group v-model="gender">
      <l-radio label="1">男</l-radio>
      <l-radio label="0">女</l-radio>
    </radio-group>
    <l-radio label="1" v-model="gender">男</l-radio>
    <l-radio label="0" v-model="gender">女</l-radio> -->

    <!--复选框 checkbox -->
    <l-checkbox label="1">数学</l-checkbox>
    <l-checkbox label="2">英语</l-checkbox>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false, // dialog弹框是否显示
      msg: '数学', // input双向绑定
      active1: false, // switch开关
      active2: false,
      active3: false,
      active4: false,
      active5: false,
      gender: '' // radio单选框性别

    }
  },
  watch: {
    // 监听switch开关的变化
    active () {
      console.log(this.active)
    },
    // 监听radio单选框的选择变化
    gender () {
      console.log('gender: ', this.gender)
    }
  },
  methods: {
    fn () {
      console.log('123')
    }
  }
}
</script>

<style lang="scss" scoped>
.row{
  margin-bottom: 20px;
  .l-button{
    margin-right: 20px;
  }
}
.l-input{
  width: 50%;
}
</style>
